<template>
  <div class="group">
    <a-list>
      <template #header> {{ t["分组列表"] }} </template>
      <a-list-item
        v-for="(item, key) in options"
        :key="key"
        :class="{ active: form.objects.includes(item.label!) }"
        class="cursor-pointer"
        @click="selectItem(item)"
      >
        {{ item.label }}
      </a-list-item>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { fetchLabelOptions } from "@/api/service/lcd-device/lcd-device";
import { SelectOptionData } from "@arco-design/web-vue";

import { form } from "../data/form";

const t = translate("公共模块");
const options = ref<SelectOptionData[]>();

onMounted(async () => {
  const data = await fetchLabelOptions(true);
  options.value = data.data;
});

const selectItem = (item: SelectOptionData) => {
  if (form.value.objects.includes(item.label!)) {
    form.value.objects = form.value.objects.filter((v) => v !== item.label!);
  } else {
    form.value.objects.push(item.label!);
  }
};
</script>

<style lang="scss" scoped>
.active {
  background: var(--primary);
  color: white;
}
</style>
